<template>
  <div>
    <div class="search-con search-con-top">
      <div class="fl">
        <!-- <Select v-model="condition.category" clearable class="search-col" @on-change="change1" style="width:200px">
          <Option v-for="item in categoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select> -->
        <!-- <Input clearable placeholder="输入区域名称搜索" class="search-input" v-model="condition.name"/> -->
        <!-- <Button class="search-btn" type="primary" @click="List">搜索</Button> -->
      </div>
      <div class="fr">
        <Button class="search-btn" type="primary" @click="vivisle=true;pid='';status=true">新增区域</Button>
      </div>
    </div>
    <tree-table expand-key="areaname" :expand-type="false" :selectable="false" :columns="columns" :data="tableData" >
      <template slot="category" slot-scope="scope">
        <div v-if="scope.row.category==1">商户区域</div>
        <div v-else>租赁点区域</div>
      </template>
      <template slot="status" slot-scope="scope">
        <div v-if="scope.row.status==1">启用</div>
        <div v-else>停用</div>
      </template>
      <template slot="likes" slot-scope="scope">
          <Button style='margin-right:5px;margin-bottom:5px' type="primary" size="small" @click="add(scope)">新增</Button>
          <Button style='margin-right:5px;margin-bottom:5px' type="primary" size="small" @click="edit(scope)">编辑</Button>
          <Poptip
              confirm
              title="您确认删除这条内容吗？"
              @on-ok="del(scope)">
              <Button v-if="scope.row.children.length==0" type="error" size="small">删除</Button>
          </Poptip>
        </template>
    </tree-table>
    <Modal
        title="区域管理"
        v-model="vivisle"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="handleReset('tableItem')"
        class-name="vertical-center-modal">
        <Form ref="tableItem" :model="tableItem" :rules="ruleValidate" :label-width="80">
          <FormItem label="区域名称" prop="areaname">
              <Input v-model="tableItem.areaname" placeholder="请输入区域名称"></Input>
          </FormItem>
           <FormItem label="停用状态">
              <i-switch size="large" :value="status" @on-change="changestatus"/>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="handleReset('tableItem')">取消</Button>
        <Button type="primary" size="large" @click="Save('tableItem')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { areaD, areaS, areaG  } from "@/api/data";
export default {
  name: "Regional",
  data() {
    return {
      vivisle: false,
      status: false,
      pid:'',
      // id
      itemId: "",
      // 详情
      tableItem: {
      },
      // 条件
      condition: {
        category: '2'
      },
      categoryList: [
        {
          label: '商户区域',
          value: '1'
        },
         {
          label: '租赁点区域',
          value: '2'
        }
      ],
      // table表头
      columns: [
        {
          title: "区域名称",
          key: "areaname"
        },
        {
          title: "区域类型",
          key: "category",
          type: 'template',
          template: 'category'
        },
        {
          title: "状态",
          key: "status",
          type: 'template',
          template: 'status'
        },
        {
          title: '操作',
          key: 'likes',
          minWidth: '200px',
          type: 'template',
          template: 'likes'
        }
      ],
      // table数据
      tableData: [],
      // 分页数据
      // page: {
      //   current: 1,
      //   total: 0,
      //   pageSize: 10
      // },
      ruleValidate: {
        areaname: [
          {
            required: true,
            message: "区域名称不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.List();
  },
  methods: {
    add(params) {
      this.itemId = params.row.id;
      this.tableItem.category = this.condition.category
      this.tableItem.id = ''
      this.tableItem.pid = params.row.id
      this.Query();
    },
    edit(params) {
      this.itemId = params.row.id;
      this.tableItem.category = params.row.category
      this.tableItem.id = params.row.id
      this.tableItem.pid = params.row.pid
      this.tableItem.areaname = params.row.areaname
      this.$set(this,'status',params.row.status==1 ? true : false)
      this.Query();
    },
    del(params) {
      this.itemId = params.row.id;
      this.Delete();
    },
    handleReset (name) {
      this.vivisle = false
      this.$refs[name].resetFields();
      this.$set(this,'status',false)
      this.tableItem = {
      }
    },
    change1 (item) {
      this.condition.category = item
    },
    // 分页数据获取
    List() {
      areaG(this.condition).then(res => {
        if (res.code==1) {
        res.data[0].expand = true
        this.tableData = res.data;
        }
      });
    },
    Query() {
      this.vivisle = true
    },
    changestatus (status1) {
        // this.$Message.info('开关状态：' + status1);
        this.$set(this,'status',status1)
        // this.$Message.info('------------' + this.status);
    },
    // 保存
    Save(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var obj = this.tableItem
          if(this.pid) {
            if(obj.category == '商户区域'){
              obj.category = 1
            } else if(obj.category == '租赁点区域'){
              obj.category = 2
            }
          } else {
            obj.category = this.condition.category
          }
          obj.status = this.status == true ? 1: 0
          areaS(obj).then(res => {
            if (res.code === 1) {
              this.handleReset(name)
              this.vivisle = false
              this.List();
            }
          });
        }
      });

    },
    // 删除
    Delete() {
      areaD({ id: this.itemId }).then(res => {
        if (res.code === 1) {
          this.itemId = "";
          this.List();
        }
      });
    }
  }
};
</script>
